<template>
  <div class="div1">
    <main class="el-main">
      <div data-v-612b7776 id="about" name="about" class="about">
        <div data-v-612b7776 class="about-header">
          <div data-v-612b7776 class="about-title">
            <i
              data-v-36792e99=""
              class="el-icon-shopping-cart-full"
              style="color: rgb(255, 103, 0); font-weight: 600"
            ></i>
            确认订单
          </div>
        </div>
      </div>
    </main>
    <div class="div2">
      <div data-v-fdaab790="" class="section-address">
        <p data-v-fdaab790="" class="title">收货地址</p>
        <ul>
          <li class="in-section">
            <h2>陈同学</h2>
            <p style="font-size: 15px; margin-top: 10px">13580018623</p>
            <p style="font-size: 15px; margin-top: 6px">
              广东 广州市 白云区 江高镇
            </p>
            <p style="font-size: 15px; margin-top: 6px">广东白云学院</p>
          </li>
          <li class="in-sections">
            <h2>陈同学</h2>
            <p style="font-size: 15px; margin-top: 10px">13580018623</p>
            <p style="font-size: 15px; margin-top: 6px">
              广东 广州市 白云区 江高镇
            </p>
            <p style="font-size: 15px; margin-top: 6px">***</p>
          </li>
          <li data-v-fdaab790="" class="address-body">
            <i style="margin-top: 50px" class="el-icon-circle-plus-outline"></i>
            <p style="font-size: 14px; color: #757575">添加新地址</p>
          </li>
        </ul>
      </div>
      <div class="cartjuan">
        <p data-v-fdaab790="" class="title">商品及优惠券</p>
        <div>小米..</div>
        <p>配送方式 <span>包邮</span></p>
        <p>
          发票 <span>电子发票</span>
          <span>个人</span>
          <span>商品明细</span>
        </p>
        <p style="float-left;margin-left:30px;">
          <el-button @click="$router.push('shoppingCart')"
            >返回购物车</el-button
          >
          <el-button type="warning" @click="jiesuan">结算</el-button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import API from "../../API/Api";
export default {
  name: "",
  data() {
    return {};
  },
  mounted() {},
  methods: {
    jiesuan() {
      API.addOrder({
        products: this.$store.state.cartLists,
        user_id: this.$store.state.user_id,
      }).then((res) => {
        console.log(res);
        if ((res.code = "001")) {
          this.$router.push('order')
          this.$notify.success({
            title: "结算成功",
            message: "这是一条成功的提示消息",
          });
          return;
        } else {
          this.$notify.error({
            title: "结算失败",
            message: "这是一条错误的提示消息",
          });
          return;
        }
      });
    },
  },
  computed: {},
  components: {},
  watch: {},
  getters: {},
};
</script>

<style scoped>
.el-main {
  background-color: #f5f5f5;
}
ul {
  list-style: none;
}
.about-title {
  width: 1225px;
  margin: 0 auto;
  height: 64px;
  line-height: 64px;
  font-size: 28px;
  background-color: #fff;
}
.about-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
}
.markdown-body h1 {
  font-size: 2em;
}
.about-content {
  width: 1225px;
  box-sizing: border-box;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 40px;
}
.about-content h1 {
  padding-bottom: 0.3em;
  border-bottom: 1px solid #eaecef;
  padding: 24px 0 16px;
}
.about-content h2 {
  border-bottom: 1px solid #eaecef;
  padding: 24px 0 16px;
}
.sp {
  color: #757575;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  margin-top: 30px;
  margin-left: 15px;
}
.Carts {
  display: inline-block;
  width: 100%;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}
.cart {
  margin: 0 auto;
  width: 1225px;
  background: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
}
.div1 {
  background-color: #f5f5f5;
}
.div2 {
  width: 1225px;
  margin: 0 auto;
  padding: 48px 0 0;
  background-color: #fff;
  margin-top: 20px;
}
.p1 {
  color: #333;
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 20px;
}
.section-address {
  width: 1129;
  height: 259px;
  padding-left: 30px;
}
.title[data-v-fdaab790] {
  color: #333;
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 20px;
}

.in-section {
  float: left;
  color: #333;
  width: 220px;
  height: 178px;
  border: 1px solid #ff6700;
  padding: 15px 24px 0;
  margin-right: 17px;
  margin-bottom: 24px;
}
.in-sections {
  float: left;
  color: #333;
  width: 220px;
  height: 178px;
  border: 1px solid #e0e0e0;
  padding: 15px 24px 0;
  margin-right: 17px;
  margin-bottom: 24px;
}
.address-body {
  float: left;
  color: #333;
  width: 220px;
  height: 178px;
  text-align: center;
  border: 1px solid #e0e0e0;
  padding: 15px 24px 0;
  margin-right: 17px;
  margin-bottom: 24px;
  line-height: 30px;
  font-size: 30px;
  text-align: center;
}
.cartjuan {
  padding-left: 30px;
}
</style>